<template>
  <div class="dashboard-editor">
    <el-row style="background:#fff; padding:16px 16px 0;margin-bottom:32px;">
      <BarChatThree/>
    </el-row>
  </div>
</template>

<script>
import {getDataApi} from '@/api/crm/home'
import BarChatThree from "@/views/dashboard/BarChatThree.vue";

export default {
  name: 'HomeThree',
  components: {
    BarChatThree
  },
  data() {
    return {
      // 定时器
      timer: null,
      lineChartData: [],
      xAxis: [],
      // 完成金额
      completeAmount: 0,
      // 完成比例
      completeRatio: 0,
      // 总金额
      totalSaleAmount: 0,
      // 未完成金额
      unAmount: 0,
      // 未完成比例
      unCompleteRatio: 0,
      // 财年文字
      text: "",
      // 项目收集
      projectCollectByYear: 0,
      // 销售机会
      saleChanceByYear: 0,
      // 市场活动
      marketActivityByYear: 0,
      // 拜访记录
      visitNumByYear: 0,
    }
  },
  activated() {
    this.getData()
    // this.timer && clearInterval(this.timer)
    // this.timer = setInterval(() => {
    // this.getData()
    // }, 3000)
  },
  created() {
    this.getData()
    // this.timer && clearInterval(this.timer)
    // this.timer = setInterval(() => {
    // this.getData()
    // }, 3000)
  },
  // deactivated() {
  //   this.timer && clearInterval(this.timer)
  // },
  methods: {
    handleSetLineChartData(type) {
      // this.lineChartData = lineChartData[type]
    },
    // 获取数据
    async getData() {
      const {code, data} = await getDataApi()
      if (code === 200) {
        // data.content && this.$message.error(data.content)
        /*
        * ['项目收集', '销售跟单', '销售机会', '客户拜访', '市场活动', '周报']
        * marketActivityList市场活动
        * projectCollectList项目收集
        * saleChanceList销售机会
        * salesMerchandiserList销售跟单
        * visitNumList拜访记录
        * weeklyReportList周报
        * */
        this.lineChartData = [
          data?.projectCollectList?.count ?? 0,
          data?.salesMerchandiserList?.count ?? 0,
          data?.saleChanceList?.count ?? 0,
          data?.visitNumList?.count ?? 0,
          data?.marketActivityList?.count ?? 0,
          data?.weeklyReportList?.count ?? 0,
        ]

        this.completeAmount = data?.completeAmount ?? 0
        this.completeRatio = data?.completeRatio ?? 0
        this.totalSaleAmount = data?.totalSaleAmount ?? 0
        this.unAmount = data?.unAmount ?? 0
        this.unCompleteRatio = data?.unCompleteRatio ?? 0
        this.text = data?.text ?? ""
        this.projectCollectByYear = data?.projectCollectByYear ?? 0
        this.saleChanceByYear = data?.saleChanceByYear ?? 0
        this.marketActivityByYear = data?.marketActivityByYear ?? 0
        this.visitNumByYear = data?.visitNumByYear ?? 0
      }
    },
  }
}
</script>

<style lang="scss" scoped>
.dashboard-editor {
  //padding: 0 32px 32px;
  padding-bottom: 32px;
  background-color: rgb(240, 242, 245);
  position: relative;

  .chart-wrapper {
    background: #fff;
    padding: 16px 16px 0;
    margin-bottom: 32px;
  }
}

@media (max-width: 1024px) {
  .chart-wrapper {
    padding: 8px;
  }
}

.panel-group {
                     //margin-top: 18px;

                     .card-panel-col {
                       margin-bottom: 32px;
                     }

                     .card-panel {
                       height: 108px;
                       cursor: pointer;
                       font-size: 12px;
                       position: relative;
                       overflow: hidden;
                       color: #666;
                       background: #fff;
                       box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
                       border-color: rgba(0, 0, 0, .05);

                       &:hover {
                         .card-panel-icon-wrapper {
                           color: #fff;
                         }

                         .icon-people {
                           background: #40c9c6;
                         }

                         .icon-message {
                           background: #36a3f7;
                         }

                         .icon-money {
                           background: #f4516c;
                         }

                         .icon-shopping {
                           background: #34bfa3
                         }
                       }

                       .icon-people {
                         color: #40c9c6;
                       }

                       .icon-message {
                         color: #36a3f7;
                       }

                       .icon-money {
                         color: #f4516c;
                       }

                       .icon-shopping {
                         color: #34bfa3
                       }

                       .card-panel-icon-wrapper {
                         float: left;
                         margin: 14px 0 0 14px;
                         padding: 16px;
                         transition: all 0.38s ease-out;
                         border-radius: 6px;
                       }

                       .card-panel-icon {
                         float: left;
                         font-size: 48px;
                       }

                       .card-panel-description {
                         float: right;
                         font-weight: bold;
                         margin: 26px;
                         margin-left: 0px;
                         text-align: right;

                         &.other {
                           display: flex;
                           flex-direction: column;
                           justify-content: center;
                           height: 100%;
                           margin: 0;
                           margin-right: 26px;

                           .card-panel-text {
                             line-height: 18px;
                             color: rgba(0, 0, 0, 0.45);
                             font-size: 20px;
                             margin-bottom: 4px;
                           }
                         }

                         .card-panel-text {
                           line-height: 18px;
                           color: rgba(0, 0, 0, 0.45);
                           font-size: 20px;
                           margin-bottom: 12px;
                         }

                         .card-panel-num {
                           display: inline-block;
                           width: auto;
                           min-width: 60px;
                           font-size: 20px;
                         }
                       }
                     }
                   }

@media (max-width:550px) {
  .card-panel-description {
    display: none;
  }

  .card-panel-icon-wrapper {
    float: none !important;
    width: 100%;
    height: 100%;
    margin: 0 !important;

    .svg-icon {
      display: block;
      margin: 14px auto !important;
      float: none !important;
    }
  }
}
</style>
